<template>
  <common-page :title="'预览-'+name" style="padding: 0 12px">
    <el-button slot="header" @click="goBack">返回</el-button>
    <div class="data-preview" slot="content">
      <div class="preview-tips">
        <span>仅展示部分数据</span>
      </div>
      <common-table class="preview-table" :data="datasetData" :field="datasetField" v-loading="isPreviewDataLoading">
        <!--        <el-table-column v-for="field in datasetField"
                                 :key="field.fieldName"
                                 :prop="field.fieldName"
                                 :label="field.fieldDescribe"
                                 show-tooltip-when-overflow>
                </el-table-column>-->
      </common-table>
    </div>
  </common-page>
</template>

<script>
import { getPreviewReportsData } from '@/api/screenConfig/dataSet'
import { md5 } from '@/utils/aesUtils'

export default {
  name: 'preview',
  data() {
    return {
      name: '',
      isPreviewDataLoading: false,
      datasetData: [],
      datasetField: []
    }
  },
  methods: {
    goBack() {
      this.$emit('back')
    },
    getDataSetData(row, isPreview) {
      this.name = row.name
      if(isPreview) {
        this.isPreviewDataLoading = true
        this.getPreviewReportsData(row.id).then(res => {
          let { datasetData, datasetField } = res
          this.datasetData = datasetData
          this.datasetField = datasetField.reduce((r, c) => {
            r.push({
              ...c,
              prop: c.fieldName,
              label: c.fieldDescribe,
              showTooltipWhenOverflow: true
            })
            return r
          }, [])
        }).catch(() => {
          this.datasetData = []
          this.datasetField = []
        }).finally(() => {
          this.isPreviewDataLoading = false
        })
      } else {
        this.datasetData = []
        this.datasetField = []
      }

    },
    //预览获取部分数据
    getPreviewReportsData(id) {
      return new Promise((resolve, reject) => {
        getPreviewReportsData({ datasetId: id }).then(res => {
          if (res && res.code === 200) {
            let { dataField, dataList } = res.data
            let datasetField = (dataField ? dataField : []).reduce((r, c) => {
              let field = {
                ...c,
                originalType: c.fieldType
              }
              field.key = md5(`${field.fieldName}_${field.fieldDescribe}_${field.fieldType}`)
              r.push(field)
              return r
            }, [])

            resolve({
              datasetField: datasetField,
              datasetData: dataList
            })
          } else {
            resolve({
              datasetField: [],
              datasetData: []
            })
          }
        }).catch(() => reject())
      })
    }
  }
}
</script>

<style scoped lang="scss">
.data-preview {
  width: 100%;
  height: 100%;
  padding-left: 18px;
  box-sizing: border-box;

  .preview-tips {
    width: 100%;
    height: 36px;
    line-height: 36px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 12px;
    color: #606266;
  }

  .preview-table {
    height: calc(100% - 36px) !important;
  }
}
</style>
